<link rel="stylesheet" href="/components/index.css">
<!-- element-ui 中已引入了lodash，所以不需要再次引入了 -->
<!-- <script src="/lib/lodash/lodash.core.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/lodash.clonedeep@4.5.0/cloneDeep.min.js"></script> -->

<script src="/lib/draggable/Sortable.min.js"></script>
<script src="/lib/draggable/vuedraggable.umd.min.js"></script>
<script>Vue.component('draggable',window.vuedraggable); </script>
<script src="/components/index.js"></script>

<!--  -->
<script src="/form-engine-create/index.js" type="module"></script>

<script src="/lib/yaml-js/yaml.min.js"></script>

<div id="form-engine-create">
  <el-dialog title="提示" :visible.sync="modalStatus">
    <x-form-panel v-model="previewFormConfig">表单预览</x-form-panel>
  </el-dialog>


  <div class="fec">
    <div class="l components-bar" :class="{collapse:!expandStatus.left}">
      <x-comp-bar :comp-bar-config="compBarConfig">compBar</x-comp-bar>
    </div>
    <div class="m">
      <button size="mini" class="expand-l" @click="toggleExpand('l')">
        {{expandStatus.left?'&lt;': '&gt;'}}</button>
      <button size="mini" class="expand-r" @click="toggleExpand('r')">
        {{expandStatus.right?'&gt;':'&lt;'}} </button>

      <header>
        <div>
          <el-button size="mini" @click="preview">预览</el-button>
          <el-button size="mini" @click="save" type="primary">保存</el-button>
          <el-button size="mini" @click="saveAsJsonFile">保存为json文件</el-button>
          <el-button size="mini" @click="addToLoacalTemplate">保存到本地模板</el-button>


        </div>
      </header>
      <main class="fes">
        <div class="form-container-preview">
          <x-form-panel ref="formTemplateConfig" v-model="formTemplateConfig">组件模板展示</x-form-panel>
        </div>
      </main>
    </div>
    <div class="r" :class="{collapse:!expandStatus.right}">
      <div>
        <el-tabs v-model="active_name_config">
          <el-tab-pane label="组件设置" name="compAttrConfig"> </el-tab-pane>
          <el-tab-pane label="表单设置" name="formAttrConfig"> </el-tab-pane>
        </el-tabs>
        <x-form-panel v-model="compAttrConfig" v-show="active_name_config=='compAttrConfig'">组件配置</x-form-panel>
        <x-form-panel v-model="formAttrConfig" v-show="active_name_config=='formAttrConfig'">表单配置</x-form-panel>

      </div>
    </div>




  </div>



</div>




<style>
  .fec {
    --font-color: #333;
    --color-primary: #409eff;
    --color-primary-light: #c6e2ff;
    --color-primary-dark: #0047b3;
    --color-primary-darker: #002d70;
    --color-border-1: #eeeeee;
    --bgColor-1: #f1f2f3;
    --bgColor-2: #f2f5f7;
    --layout-padding: 10px;

    color: var(--font-color);
    font-size: 16px;

    display: flex;
    height: 100vh;
    box-sizing: border-box;

    .collapse {
      width: 0 !important;
      opacity: 0;

    }


    .l>div:only-child,
    .r>div:only-child,
    .m main {
      padding: var(--layout-padding);
    }

    .l,
    .r,
    .m {
      overflow: auto;
    }

    .l,
    .r {
      width: 20%;
      transition: width 0.2s;
    }

    .m {
      flex: 1;
      border-left: 1px solid var(--color-border-1);
      border-right: 1px solid var(--color-border-1);
      position: relative;
      display: flex;
      flex-direction: column;

      main {
        flex: 1;
        background-color: var(--bgColor-1);
        height: 100%;
        overflow: auto;


      }

      .expand-l,
      .expand-r {
        width: min-content;
        position: absolute;
        top: 50%;
      }

      .expand-l {
        left: 0px;
      }

      .expand-r {
        right: 0px;
        /* transform: translateX(-100%); */
      }

      header {
        height: 60px;
        border-bottom: 1px solid var(--color-border-1);

        >div {
          padding: var(--layout-padding);
        }
      }
    }
  }

</style>
